<template>
    <basic-container>
        <el-tabs v-model="tabActiveName" @tab-click="handleClick">
            <el-tab-pane label="分销商品" name="first">
            </el-tab-pane>
            <el-tab-pane label="分享返利商品" name="second">
            </el-tab-pane>
        </el-tabs>
        <avue-crud :option="option"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :table-loading="loading"
                   :permission="permissionList"
                   @row-del="rowDel"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   :page="page"
                   @refresh-change="refreshChange"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @on-load="onLoad">
            <template slot-scope="{row}"
                      slot="goodsMainPhotoUrl">
                <img :src="row.goodsMainPhotoUrl"
                     style="width:50px;height:50px;" />
            </template>

            <template slot-scope
                      slot="menuLeft">

                <el-button type="primary"
                           size="small"
                           plain
                           class="addBtn"
                           @click="allDelete">批量删除</el-button>
            </template>

        </avue-crud>
    </basic-container>
</template>

<script>
    import {
        getList,
        remove,
        removeAll
    } from "@/api/distribution/disGoodsRelation";
    import { mapGetters } from "vuex";

    export default {
        data () {
            return {
                form: {},
                query: {},
                loading: true,
                tabActiveName: 'first', //tab页切换
                settingType:1, //设置类型 1分销 2商品分享返利
                rolesTree: [],
                rolesKeys: [],
                idList:[],
                box: false,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                option: {
                    size: 'mini',
                    index:false,
                    tip: false,
                    border: true,
                    index: false,
                    selection: true,
                    viewBtn: false,
                    editBtn: false,
                    addBtn: false,
                    rowKey: 'id',
                    height: 'auto',
                    searchMenuSpan:8,
                    dialogType: 'drawer',
                    align: 'center',
                    menuWidth: 150,
                    column: [
                        {
                            label: "创建时间",
                            prop: "addTime",
                            fixed: true,
                            width:200,
                            rules: [{
                                required: true,
                                message: "请输入创建时间",
                                trigger: "blur"
                            }]
                        },

                        {
                            label: "商品名称",
                            prop: "goodsName",
                            rules: [{
                                required: true,
                                message: "请输入评论主体id",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "主图片",
                            prop: "goodsMainPhotoUrl",
                            slot: true,
                            width:200,
                            rules: [{
                                required: true,
                                message: "请输入评价用户id",
                                trigger: "blur"
                            }]
                        },
                    ]
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList () {
                return {
                    delBtn:  this.vaildData(this.permission["/mall-cloud-distribution/seller/goodsRelation/delete"], true),
                };
            },
        },
		created() {
			let settingType=localStorage.getItem('settingType')
			if(settingType){
				if(settingType==1){
					this.tabActiveName= 'first'//tab页切换
					this.settingType=1
				}else{
					this.tabActiveName= 'second'//tab页切换
					this.settingType=2
				}
			}
		},
        methods: {
            handleClick(tab) {
				console.log(tab)
                if (tab.name == "first") {
                    this.settingType = 1;
                    this.page.currentPage = 1;
					this.$refs.crud.searchReset();
                    this.onLoad(this.page);
                } else if (tab.name == "second") {
                    this.settingType = 2;
                    this.page.currentPage = 1;
					this.$refs.crud.searchReset();
                    this.onLoad(this.page);
                }
            },

            rowSave (row, loading, done) {
                row.position = row.positionIds;
                row.deptName = row.$deptId;
                row.repassword = row.password;
                add(row).then(() => {
                    loading();
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                }, error => {
                    done();
                    console.log(error);
                });
            },
            rowUpdate (row, index, loading, done) {
                row.position = row.positionIds;
                update(row).then(() => {
                    loading();
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                }, error => {
                    done();
                    console.log(error);
                });
            },
            rowDel (row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id,this.settingType);
                    })
                    .then(() => {
                        if (this.data.length == 1) {
                            this.page.currentPage -= 1
                        }
                        this.onLoad(this.page)

                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            searchReset () {
                this.query = {};
                this.idList = [];
                this.onLoad(this.page);
            },
            searchChange (params,done) {
                // this.query = params;
				params.settingType=this.settingType
                this.onLoad(this.page, params,done);
            },
            currentChange (currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange (pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange () {
                this.onLoad(this.page);
            },
            //监控多选点击事件
            selectionChange(row) {
                var idList = []
                if (row.length > 0) {
                    for (let item of row) {
                        idList.push(item.id)
                    }
                    this.idList = idList
                }
                else {
                    this.idList =[];
                }
            },
            onLoad (page, params = {settingType: this.settingType},done) {
                this.loading = true;
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if(done){
                        done();
                    }
					if(res.data.data.length==0 && this.page.currentPage>=1){
						this.page.currentPage = this.page.currentPage-1
						this.onLoad(this.page);
					} else {
                        this.loading = false;
                        const data = res.data;
                        this.page.total = data.count;
                        this.data = data.data;
                    }



                });
            },
            //全选删除
            allDelete(){
                removeAll(this.idList).then(res => {
                    if(this.idList.length>0){
                        if (res.data.success) {
                            this.onLoad(this.page, this.params);
                            this.idList=[];
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }
                    else{
                        this.$message({
                            type: "error",
                            message: "至少选择一笔数据"
                        });
                    }

                }, error => {
                    console.log(error);
                });
            },
        }
    };
</script>

<style>
</style>
